<template>
    <el-form label-width="4.15%" style="margin: auto;">
        <el-form-item label="线索跟踪记录" prop="noteContent">
            <el-input
                v-model="customerRemark.noteContent"
                rows="3"
                type="textarea"
                placeholder="请输入活动备注记录"
                style="width: 20%;"
            />
        </el-form-item>
        <el-form-item label="跟踪方式" prop="noteWay">
            <el-select
                v-model="customerRemark.noteWay"
                placeholder="请选择跟踪方式"
                clearable
                style="width: 20%;"
                @click="loadDicData('noteWay')">
                <el-option
                    v-for="item in noteWayOptions"
                    :key="item.id"
                    :label="item.typeValue"
                    :value="item.id"/>
            </el-select>
        </el-form-item>
    </el-form>
    <el-button type="primary" @click="customerRemarkSubmit()">提 交</el-button>
    <el-button type="primary" plain @click="goBack">返 回</el-button>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {doGet, doPost} from "../http/httpRequest.js";
import {showMessage} from "../util/message.js";
import {useRoute, useRouter} from "vue-router";

// 客户备注信息对象，用于存储当前编辑的备注详情
// 采用ref响应式包装，确保表单数据变更能实时反映到视图
let customerRemark = ref({});
// 客户备注方式选项数组，用于存储备注方式的下拉选择项
// 存储从后端获取的联系方式字典数据（如电话/微信/邮件等）
let noteWayOptions = ref([]);
// 获取当前路由信息和路由导航实例
// route用于获取URL参数，router用于页面跳转
let route = useRoute();
let router = useRouter();

// 组件挂载完成后执行初始化操作
// onMounted是Vue3的生命周期钩子，在DOM渲染完成后触发
onMounted(() => {
    // 获取路由参数中的客户备注ID
    // 从URL路径中提取customerRemarkId参数（如/dashboard/customer/remark/edit/123中的123）
    let customerRemarkId = route.params.customerRemarkId;
    // 加载客户备注详情数据
    loadCustomerRemark(customerRemarkId);
    // 加载联系方式选项数据
    loadDicData('noteWay');
})

/**
 * 加载字典数据方法
 * @param {string} typeCode - 字典类型编码，这里用于获取备注方式选项
 * 功能：从后端API获取指定类型的字典数据，用于填充下拉选择框
 */
const loadDicData = typeCode => {
    // 调用GET请求获取字典数据，URL格式为/api/dic/字典类型编码
    doGet('api/dic/' + typeCode, {}).then(resp => {
        // 检查后端返回的状态码是否为200（成功）
        if (resp.data.code == 200) {
            // 将获取到的字典数据赋值给联系方式选项数组
            noteWayOptions.value = resp.data.info;
        } else {
            // 字典数据加载失败时显示错误提示，内容为后端返回的错误消息
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 加载客户备注详情方法
 * @param {string} customerRemarkId - 客户备注ID，用于获取特定备注的详细信息
 * 功能：根据ID从后端获取客户备注详情，并填充到表单中（编辑模式使用）
 */
const loadCustomerRemark = customerRemarkId => {
    // 调用GET接口获取备注详情，URL格式为/api/customer/remark/detail/备注ID
    doGet('/api/customer/remark/detail/' + customerRemarkId).then(resp => {
        // 检查后端返回的状态码是否为200（成功）
        if (resp.data.code == 200) {
            // 将获取的备注数据赋值给响应式对象，自动更新表单
            customerRemark.value = resp.data.info;
        } else {
            // 接口调用失败，显示错误提示，内容为后端返回的错误消息
            showMessage(resp.data.msg, 'error');
        }
    })
}

/**
 * 客户备注提交方法
 * 功能：保存编辑后的备注信息到服务器，支持新增和编辑两种操作
 */
const customerRemarkSubmit = () => {
    // 从路由参数中获取客户备注ID
    let customerRemarkId = route.params.customerRemarkId;

    // 调用POST请求提交表单数据，URL为/api/customer/remark/edit
    doPost('/api/customer/remark/edit', {
        customerRemarkId: customerRemarkId,  // 备注ID（编辑时必填）
        noteContent: customerRemark.value.noteContent,  // 备注内容
        noteWay: customerRemark.value.noteWay  // 备注方式（关联字典表ID）
    }).then(resp => {
        if (resp.data.code == 200) {
            showMessage(resp.data.msg, 'success'); // 提交成功提示（绿色对勾图标）
            router.back(); // 返回上一页（通常是客户详情页）
        } else {
            showMessage(resp.data.msg, 'error'); // 提交失败提示（红色错误图标）
        }
    })
}

/**
 * 返回上一页函数
 * 功能：通过路由实例的back方法实现页面回退导航
 * 相当于浏览器的"后退"按钮功能
 */
const goBack = () => {
    router.back();
}
</script>

<style scoped>

</style>